<template>
  <div class="salary-range">
    <div class="pie-chart-wrapper flex">
      <div class="pie-box">
        <PieChart :chartData="pieChartData"></PieChart>
      </div>
      <div class="regionLine-result">
        <div class="range-desItem" v-for="(item, index) in pieChartData">
          <div class="range-icon"></div>
          <div class="range-value">{{ item.value + '%' }}</div>
          <div class="range-key">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="salary">
        <div class="item">
          <div class="label">{{ positionName }}人数占比最多的薪酬区间</div>
          <div class="value">
            <span class="range">¥ {{ salaryInfo?.maxRateRange }} </span>
            <span class="percent"> {{ salaryInfo?.maxRate }}% </span>
          </div>
        </div>
        <div class="item">
          <div class="label">全国{{ positionName }}平均薪酬</div>
          <div class="value">
            <span class="range">¥{{ salaryInfo?.salaryNum || '-' }}/月</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bar-chart-wrapper">
      <div class="item">
        <div class="title-wrapper flex-align-center">
          <TitleHeader name="学历薪酬分布" />
        </div>
        <div class="chart-box">
          <BarChart
            v-if="educationData.length > 0"
            :data="educationData"
            labelColor="#0169FF"
            colorFrom="#589BFD"
            colorTo="#BBDEFF"
            yAxisName="(薪酬/月)"
          />
          <Empty v-else />
        </div>
      </div>
      <div class="item">
        <div class="title-wrapper flex-align-center">
          <TitleHeader name="工作年限薪酬分布" />
        </div>
        <div class="chart-box">
          <BarChart
            v-if="yearData.length > 0"
            :data="yearData"
            labelColor="#1cd372"
            colorFrom="#9de7ab"
            colorTo="#fec48c"
            yAxisName="(薪酬/月)"
          />
          <Empty v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import {
  salarySection,
  getSalaryEducation,
  getSalaryWorkYear,
} from '@/api/position';
import Empty from '@/components/Empty.vue';
import TitleHeader from './TitleHeader.vue';
import PieChart from './PieChart.vue';
import BarChart from '@/components/BarChart.vue';

const props = defineProps({
  positionId: {
    type: String,
    default: '',
  },
});

const route = useRoute();

const pieChartData = ref([]);

const educationData = ref([]);

const yearData = ref([]);

/**
 * 根据传入的参数，获取到多少个月之前的年月
 * @param {number} monthsAgo 距离当前多少个月前
 * @returns {string} 返回格式为 'YYYY-MM'
 */
const getDate = (monthsAgo) => {
  const now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1; // JS月份从0开始
  month -= monthsAgo;
  while (month <= 0) {
    month += 12;
    year -= 1;
  }
  const pad = (n) => (n < 10 ? '0' + n : n);
  return `${year}-${pad(month)}-01`;
};

const salaryInfo = ref({});
const salarySectionFn = async () => {
  const params = {
    id: props.positionId,
  };
  const res = await salarySection(params);
  if (res.code === 200 && res.data.list) {
    pieChartData.value = res.data.list.map((item) => {
      return { name: item.salaryRank, value: item.rankRate };
    });
    salaryInfo.value = res.data;
  }
};

const getSalaryEducationFn = async () => {
  const params = {
    id: props.positionId,
    beginTime: getDate(6),
    endTime: getDate(1),
    regionIds: '100000',
  };
  const res = await getSalaryEducation(params);
  if (res.code === 200) {
    educationData.value = res.data.map((item) => {
      return {
        name: item.eduName,
        value: item.salaryNum,
      };
    });
  }
};

const getSalaryWorkYearFn = async () => {
  const params = {
    id: props.positionId,
    beginTime: getDate(6),
    endTime: getDate(1),
    regionIds: '100000',
  };
  const res = await getSalaryWorkYear(params);
  if (res.code === 200) {
    yearData.value = res.data.map((item) => {
      return {
        name: item.expCodeStr,
        value: item.salaryNum,
      };
    });
  }
};

const positionName = route.query.positionName; // TODO:

onMounted(() => {
  salarySectionFn();
  getSalaryEducationFn();
  getSalaryWorkYearFn();
});
</script>

<style lang="scss" scoped>
.salary-range {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: auto;
  .pie-chart-wrapper {
    justify-content: space-around;
    .salary {
      .item {
        &:first-child {
          margin-bottom: 32px;
        }
        .label {
          font-size: 24px;
          color: $title-color;
          margin-bottom: 24px;
        }
        .value {
          font-family: DIN-PRO-800-ExtraBold;
          font-weight: bold;
          color: $primary-color;
          font-size: 30px;
          .percent {
            margin-left: 36px;
          }
        }
      }
    }
    .pie-box {
      width: 300px;
      height: 280px;
    }
    .regionLine-result {
      display: flex;
      flex-wrap: wrap;
      max-width: 440px;
      margin-left: 20px;
      justify-content: flex-start;
      background-color: #f3f7ff;
      border-radius: 8px;
      padding: 10px;
      .range-desItem {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin: 0 10px;
        .range-icon {
          width: 20px;
          height: 20px;
          border-radius: 4px;
          margin-right: 10px;
        }
        .range-key {
          color: #555;
          font-size: 24px;
        }
        .range-value {
          font-size: 24px;
          color: #555;
          font-weight: bold;
          margin-right: 10px;
          font-family: D-DIN-PRO-800-ExtraBold;
        }
      }
      .range-desItem:nth-child(1) {
        .range-icon {
          background: #6115ff;
        }
      }
      .range-desItem:nth-child(2) {
        .range-icon {
          background: #9544ff;
        }
      }
      .range-desItem:nth-child(3) {
        .range-icon {
          background: #af73ff;
        }
      }
      .range-desItem:nth-child(4) {
        .range-icon {
          background: #caa1ff;
        }
      }
      .range-desItem:nth-child(5) {
        .range-icon {
          background: #dac0fe;
        }
      }
      .range-desItem:nth-child(6) {
        .range-icon {
          background: #80a8ff;
        }
      }
      .range-desItem:nth-child(7) {
        .range-icon {
          background: #9fbaf4;
        }
      }
      .range-desItem:nth-child(8) {
        .range-icon {
          background: #9fbaf4;
        }
      }
      .range-desItem:nth-child(9) {
        .range-icon {
          background: #79ccb7;
        }
      }
      .range-desItem:nth-child(10) {
        .range-icon {
          background: #a5dcd4;
        }
      }
    }
  }

  .bar-chart-wrapper {
    display: flex;
    gap: 80px;
    margin-top: 52px;
    .item {
      width: calc(50% - 40px);
      .title-wrapper {
        .header {
          margin-bottom: 0;
        }
        .tip {
          font-size: 18px;
          padding: 6px 12px;
          color: $primary-color;
          background-color: #e7f2ff;
          border-radius: 4px;
          margin-left: 8px;
        }
      }
      .chart-box {
        margin-top: 24px;
        width: 100%;
        height: 400px;
      }
    }
  }
}
</style>
